<template>
  <v-row>
    <!-- 客流分析卡片 -->
    <v-col cols="12" sm="6">
      <v-card elevation="0">
        <v-card-text>
          <h4 class="text-h4 mt-1">客流分析</h4>
          <apexchart
            type="line"
            height="300"
            :options="chartOptionsForCustomerFlow"
            :series="lineChartForCustomerFlow.series"
          ></apexchart>
        </v-card-text>
      </v-card>
    </v-col>

    <!-- 库存分析卡片 -->
    <v-col cols="12" sm="6">
      <v-card elevation="0">
        <v-card-text>
          <h4 class="text-h4 mt-1">库存分析</h4>
          <apexchart
            type="scatter"
            height="300"
            :options="chartOptionsForInventory"
            :series="lineChartForInventory.series"
          ></apexchart>
        </v-card-text>
      </v-card>
    </v-col>

    <!-- 餐位分析卡片 -->
    <v-col cols="12" sm="6">
      <v-card elevation="0">
        <v-card-text>
          <h4 class="text-h4 mt-1">餐位的周转率和利用率分析</h4>
          <apexchart
            type="bar"
            height="300"
            :options="chartOptionsForSeatAnalysis"
            :series="lineChartForSeatAnalysis.series"
          ></apexchart>
        </v-card-text>
      </v-card>
    </v-col>

    <!-- 收入分析卡片 -->
    <v-col cols="12" sm="6">
      <v-card elevation="0">
        <v-card-text>
          <h4 class="text-h4 mt-1">收入分析</h4>
          <apexchart
            type="bar"
            height="300"
            :options="chartOptionsForIncome"
            :series="lineChartForIncome.series"
          ></apexchart>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import ApexCharts from 'apexcharts';

// 客流分析图表配置及数据
const chartOptionsForCustomerFlow = computed(() => {
  return {
    chart: {
      type: 'line',
      height: 300,
      fontFamily: `inherit`,
      foreColor: '#a1aab2',
    },
    colors: ['#ff5722', '#4caf50'], // 使用鲜艳的颜色
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    xaxis: {
      type: 'category',
      categories: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110', '120', '0'], // 最右边为0
      title: {
        text: '分钟'
      }
    },
    yaxis: {
      title: {
        text: '人数'
      }
    },
    tooltip: {
      theme: 'dark'
    }
  };
});

// 客流数据
const lineChartForCustomerFlow = {
  series: [
    {
      name: '餐厅人数',
      data: [10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70]
    },
    {
      name: '排队人数',
      data: [5, 8, 12, 15, 20, 22, 25, 28, 30, 32, 35, 38, 40]
    }
  ]
};

// 库存分析图表配置及数据
const chartOptionsForInventory = computed(() => {
  return {
    chart: {
      type: 'scatter',
      height: 300,
      fontFamily: `inherit`,
      foreColor: '#a1aab2',
    },
    colors: ['#1e88e5', '#ffeb3b'], // 使用鲜艳的颜色
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    xaxis: {
      type: 'category',
      categories: ['5天前', '4天前', '3天前', '2天前', '1天前', '今天', '1天后', '2天后', '3天后', '4天后', '5天后'], // 中间是今天
      title: {
        text: '天'
      }
    },
    yaxis: {
      title: {
        text: '库存百分比'
      }
    },
    tooltip: {
      theme: 'dark'
    },
    plotOptions: {
      scatter: {
        dataLabels: {
          enabled: true,
          formatter: function (val: { x: string; y: number; }) {
            return val.x + ',' + val.y;
          }
        }
      }
    },
    annotations: {
      yaxis: [{
        y: 30,
        borderColor: '#999',
        label: {
          borderColor: '#999',
          style: {
            color: '#fff',
            background: '#00E396',
          },
          text: '未来预测',
        }
      }]
    }
  };
});

// 计算库存数据并进行线性回归拟合
const lineChartForInventory = {
  series: [
    {
      name: '原材料1',
      data: [
        { x: '5天前', y: 80 },
        { x: '4天前', y: 70 },
        { x: '3天前', y: 60 },
        { x: '2天前', y: 50 },
        { x: '1天前', y: 40 },
        { x: '今天', y: 30 }, // 今天的库存
        { x: '1天后', y: 0 }, // 预测值
        { x: '2天后', y: 0 }, // 预测值
        { x: '3天后', y: 0 }, // 预测值
        { x: '4天后', y: 0 }, // 预测值
        { x: '5天后', y: 0 }  // 预测值
      ]
    },
    {
      name: '原材料2',
      data: [
        { x: '5天前', y: 75 },
        { x: '4天前', y: 65 },
        { x: '3天前', y: 55 },
        { x: '2天前', y: 45 },
        { x: '1天前', y: 35 },
        { x: '今天', y: 25 }, // 今天的库存
        { x: '1天后', y: 20 }, // 预测值
        { x: '2天后', y: 15 }, // 预测值
        { x: '3天后', y: 10 }, // 预测值
        { x: '4天后', y: 5 }, // 预测值
        { x: '5天后', y: 0 }  // 预测值
      ]
    }
  ]
};

// 餐位分析图表配置及数据
const chartOptionsForSeatAnalysis = computed(() => {
  return {
    chart: {
      type: 'bar',
      height: 300,
      fontFamily: `inherit`,
      foreColor: '#a1aab2',
    },
    colors: ['#ff9800', '#8bc34a'], // 使用鲜艳的颜色
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    xaxis: {
      type: 'category',
      categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
      title: {
        text: '餐位'
      }
    },
    yaxis: {
      title: {
        text: '百分比'
      }
    },
    tooltip: {
      theme: 'dark'
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '50%'
      }
    }
  };
});

const lineChartForSeatAnalysis = {
  series: [
    {
      name: '周转率',
      data: [30, 40, 35, 25, 30, 40, 35, 25, 30, 40, 35, 25, 30, 40, 35, 25, 30, 40, 35, 25]
    },
    {
      name: '利用率',
      data: [50, 60, 55, 45, 50, 60, 55, 45, 50, 60, 55, 45, 50, 60, 55, 45, 50, 60, 55, 45]
    }
  ]
};

// 收入分析图表配置及数据
const chartOptionsForIncome = computed(() => {
  return {
    chart: {
      type: 'bar',
      height: 300,
      fontFamily: `inherit`,
      foreColor: '#a1aab2',
    },
    colors: ['#f44336', '#9c27b0'], // 使用鲜艳的颜色
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth',
      width: 2
    },
    xaxis: {
      type: 'category',
      categories: ['收入/支出'],
      title: {
        text: ''
      }
    },
    yaxis: {
      title: {
        text: '金额'
      }
    },
    tooltip: {
      theme: 'dark'
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '50%'
      }
    }
  };
});

const lineChartForIncome = {
  series: [
    {
      name: '收入',
      data: [500, 600, 700, 800, 900]
    },
    {
      name: '支出',
      data: [-300, -400, -500, -600, -700]
    }
  ]
};

// 在组件挂载后初始化图表（以确保图表正确渲染）
onMounted(() => {
  const customerFlowChart = new ApexCharts(
    document.querySelector('#chartForCustomerFlow'),
    chartOptionsForCustomerFlow.value
  );
  customerFlowChart.render();

  const inventoryChart = new ApexCharts(
    document.querySelector('#chartForInventory'),
    chartOptionsForInventory.value
  );
  inventoryChart.render();

  const seatAnalysisChart = new ApexCharts(
    document.querySelector('#chartForSeatAnalysis'),
    chartOptionsForSeatAnalysis.value
  );
  seatAnalysisChart.render();

  const incomeChart = new ApexCharts(
    document.querySelector('#chartForIncome'),
    chartOptionsForIncome.value
  );
  incomeChart.render();
});
</script>
